﻿@page "/scheduler/timeline-grouping"

@using Syncfusion.Blazor.Schedule
@inherits SampleBaseComponent;

<SampleDescription>
    <p>This demo showcases how the multiple resources are grouped as well as how the events are portrayed in timeline view layouts.</p>
</SampleDescription>
<ActionDescription>
   <p>In the timeline view, each row depicts a single resource whereas in vertical views, each resource are grouped parallelly as columns. Here, the resource grouping follows the tree-view like hierarchical grouping structure and can contain
      any level of child resources. They are grouped in layout by using the <code>Group</code> property and its order of grouping depends on the order of names passed onto the <code>Resources</code> option within <code>Group</code>. </p>
   <p>Also, the colors defined for the child level resources will get applied to the events of those resources by default. In case, if the colors of parent level needs to be applied to those child events, then it is necessary to define the
      <code>ResourceColorField</code> option within the <code>EventSettings</code> property with the parent level resource name value. </p>
</ActionDescription>

<div class="control-section">
    <div class="content-wrapper">
        <SfSchedule TValue="ScheduleData.ResourceData" Width="100%" Height="650px" @bind-SelectedDate="@CurrentDate" @bind-CurrentView="@CurrentView">
            <ScheduleGroup Resources="@GroupData"></ScheduleGroup>
            <ScheduleResources>
                <ScheduleResource TItem="ResourceData" TValue="int" DataSource="@ProjectData" Field="ProjectId" Title="Choose Project" Name="Projects" TextField="Text" IdField="Id" ColorField="Color"></ScheduleResource>
                <ScheduleResource TItem="ResourceData" TValue="int[]" DataSource="@TaskData" Field="TaskId" Title="Category" Name="Categories" TextField="Text" IdField="Id" GroupIDField="GroupId" ColorField="Color" AllowMultiple="true"></ScheduleResource>
            </ScheduleResources>
            <ScheduleViews>
                <ScheduleView MaxEventsPerRow="1" Option="View.TimelineDay"></ScheduleView>
                <ScheduleView MaxEventsPerRow="1" Option="View.TimelineWeek"></ScheduleView>
                <ScheduleView MaxEventsPerRow="1" Option="View.TimelineWorkWeek"></ScheduleView>
                <ScheduleView MaxEventsPerRow="1" Option="View.TimelineMonth"></ScheduleView>
                <ScheduleView Option="View.Agenda"></ScheduleView>
            </ScheduleViews>
            <ScheduleEventSettings DataSource="@DataSource"></ScheduleEventSettings>
        </SfSchedule>
    </div>
</div>

@code{
    private View CurrentView = View.TimelineWeek;
    public DateTime CurrentDate = new DateTime(2020, 1, 8);
    private List<ScheduleData.ResourceData> DataSource = new ScheduleData().GetResourceData();
    private string[] GroupData = new string[] { "Projects", "Categories" };
    private List<ResourceData> ProjectData { get; set; } = new List<ResourceData> {
        new ResourceData {Text = "PROJECT 1", Id= 1, Color= "#cb6bb2"},
        new ResourceData {Text = "PROJECT 2", Id= 2, Color= "#56ca85"},
        new ResourceData {Text = "PROJECT 3", Id= 3, Color= "#df5286"}
    };
    private List<ResourceData> TaskData { get; set; } = new List<ResourceData> {
        new ResourceData { Text = "Nancy", Id= 1, GroupId = 1, Color = "#df5286" },
        new ResourceData { Text = "Steven", Id= 2, GroupId = 1, Color = "#7fa900" },
        new ResourceData { Text = "Robert", Id= 3, GroupId = 2, Color = "#ea7a57" },
        new ResourceData { Text = "Smith", Id= 4, GroupId = 2, Color = "#5978ee" },
        new ResourceData { Text = "Michael", Id= 5, GroupId = 3, Color = "#df5286" },
        new ResourceData { Text = "Root", Id= 6, GroupId = 3, Color = "#00bdae" }
    };
    public class ResourceData
    {
        public string Text { get; set; }
        public int Id { get; set; }
        public int GroupId { get; set; }
        public string Color { get; set; }
    }
}
